<template>
  <div class="home-page">
    <!-- 轮播图区域 -->
    <section class="banner-section">
      <el-carousel
          height="500px"
          trigger="click"
          class="home-carousel"
      >
        <el-carousel-item v-for="(item, idx) in eventPage.list" :key="idx">
          <div>
            <el-image
                :src="item.cover"
                fit="cover"
            ></el-image>
            <div class="carousel-overlay"></div>
            <div class="carousel-content">
              <h2 class="carousel-title">{{ item.title }}</h2>
              <p class="carousel-desc">{{ truncate(item.description, 80) }}</p>
              <el-button
                  type="primary"
                  @click="goEventDetail(item.eventId)"
                  class="carousel-btn"
              >
                查看详情
              </el-button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>

    <!-- 功能与内容网格 -->
    <div class="content-grid">
      <!-- 左侧主内容区 -->
      <div class="main-column">
        <!-- 教学视频区域 -->
        <section class="content-section">
          <div class="section-header">
            <h2 class="section-title">精品教学资源</h2>
            <el-link type="primary" @click="viewAllVideos">查看全部</el-link>
          </div>
          <el-skeleton
              :loading="videoLoading"
              animated
              class="video-skeleton"
          >
            <template #template>
              <el-space wrap>
                <div v-for="i in 6" class="video-card">
                  <el-skeleton-item variant="image" style="width: 240px; height: 240px" />
                  <div style="padding: 14px">
                    <el-skeleton-item variant="p" style="width: 50%" />
                    <div style="display: flex; align-items: center;justify-content: space-between" >
                      <el-skeleton-item variant="text" style="margin-right: 16px" />
                      <el-skeleton-item variant="text" style="width: 30%" />
                    </div>
                  </div>
                </div>
              </el-space>

            </template>
            <template #default>
             <el-space wrap>
               <video-card @click="goVideoDetail(item.videoId)" class="video-card" v-for="item in shareVideoPage.list" :key="item.videoId" :videoInfo="item"/>
             </el-space>
            </template>
          </el-skeleton>
        </section>

        <!-- 校园活动区域 -->
        <section class="content-section">
          <div class="section-header">
            <h2 class="section-title">近期校园活动</h2>
            <el-link type="primary" @click="viewAllEvents">查看全部</el-link>
          </div>
          <div class="event-list">
            <el-card
                v-for="(item, idx) in eventPage.list.slice(0, 3)"
                :key="idx"
                class="event-item-card"
                @click="goEventDetail(item.eventId)"
            >
              <div class="event-card-content">
                <el-image
                    :src="item.cover"
                    class="event-img"
                    fit="cover"
                ></el-image>
                <div class="event-details">
                  <h3 class="event-title">{{ item.title }}</h3>
                  <p class="event-desc">{{ truncate(item.description, 60) }}</p>
                  <div class="event-meta">
                    <span class="event-time">
                      <el-icon><Clock/></el-icon>
                      {{ formatDate(item.startTime) }}
                    </span>
                    <span class="event-participants">
                      <el-icon><User/></el-icon>
                      {{ item.participantCount || 0 }}人参与
                    </span>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </section>
      </div>

      <!-- 右侧功能区 -->
      <div class="sidebar-column">
        <!-- 校园工具 -->
        <div class="sidebar-card">
          <h3 class="sidebar-title">
            <el-icon class="title-icon">
              <Tools/>
            </el-icon>
            校园工具
          </h3>
          <div class="tool-grid">
            <div class="tool-item" @click="goLostFound">
              <div class="tool-icon">
                <el-icon>
                  <Search/>
                </el-icon>
              </div>
              <span class="tool-name">失物招领</span>
            </div>
            <div class="tool-item">
              <div class="tool-icon">
                <el-icon>
                </el-icon>
              </div>
              <span class="tool-name">表白墙</span>
            </div>
            <div class="tool-item">
              <div class="tool-icon">
                <el-icon><ChatDotRound /></el-icon>
              </div>
              <span class="tool-name">聊天室</span>
            </div>
            <div class="tool-item">
              <div class="tool-icon">
                <el-icon>
                  <Calendar/>
                </el-icon>
              </div>
              <span class="tool-name">娱乐</span>
            </div>
            <div class="tool-item">
              <div class="tool-icon">
                <el-icon>
                  <el-icon><Sort /></el-icon>
                </el-icon>
              </div>
              <span class="tool-name">热门榜</span>
            </div>
            <div class="tool-item">
              <div class="tool-icon">
                <el-icon>
                  <Phone/>
                </el-icon>
              </div>
              <span class="tool-name">常用电话</span>
            </div>
          </div>
        </div>

        <!-- 热门贴吧 -->
        <div class="sidebar-card">
          <div style="display: flex;justify-content: space-between">
            <h3 class="sidebar-title">
              <el-icon class="title-icon">
                <Comment/>
              </el-icon>
              热门贴吧
            </h3>
            <el-link>更多</el-link>
          </div>
          <el-skeleton
              :loading="bardLoading"
              animated
              class="bard-skeleton"
          >
            <template #default>
              <div class="bard-list">
                <div
                    class="bard-item"
                    v-for="item in bardList"
                    :key="item.bardId"
                    @click="goPost(item.bardId)"
                >
                  <el-avatar :src="item.cover" class="bard-avatar"></el-avatar>
                  <div class="bard-info">
                    <p class="bard-name">{{ item.bardName }}</p>
                    <p class="bard-count">{{ item.postCount }}篇帖子</p>
                  </div>
                </div>
              </div>
            </template>
          </el-skeleton>
        </div>

        <!-- 跳蚤市场 -->
        <div class="sidebar-card">
          <h3 class="sidebar-title">
            <el-icon class="title-icon">
              <ShoppingCart/>
            </el-icon>
            跳蚤市场
          </h3>
          <div class="market-list">
            <div
                class="market-item"
                v-for="(item, idx) in skuPage.list"
                :key="idx"
                @click="goSkuDetail(item.skuId)"
            >
              <el-image
                  :src="item.defaultPic"
                  class="market-img"
                  fit="cover"
              ></el-image>
              <div class="market-info">
                <el-text>{{ item.skuTitle }}</el-text>
                <p class="market-price">¥{{ item.price }}</p>
              </div>
            </div>
          </div>
          <el-link type="primary" class="view-more" @click="goSkuList">更多商品</el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from "vue";
import {useRouter} from "vue-router";
import {reqGetBardList} from "@/api/social/bard";
import {reqGetEventPage} from "@/api/social/event";
import type {SocBard} from "@/api/social/bard/type";
import type {SocEvents} from "@/api/social/event/type";
import {reqGetSkuPage} from "@/api/serve/re-market/sku";
import {
  Tools, Calendar, ShoppingCart, Clock, Comment, Phone
} from "@element-plus/icons-vue";
import {reqGetShareVideoPage} from "@/api/share";
import VideoCard from '@/components/card/VideoCard.vue'

// 路由
const router = useRouter();
// 响应式数据
const videoLoading = ref(true);
const bardLoading = ref(true);
const eventLoading = ref(true);

// 分页与列表数据
const eventQuery = reactive({
  pageNum: 1,
  pageSize: 5,
  sortByColumn: "view_count",
});
const eventPage = reactive({
  pageNum: 1,
  total: 0,
  list: [] as SocEvents[],
});
const skuQuery = reactive({
  pageNum: 1,
  pageSize: 4,
});
const skuPage = reactive({
  pageNum: 1,
  list: [],
  total: 0,
});
const bardList = ref<SocBard[]>([]);

// 工具函数：日期格式化
const formatDate = (timestamp: number) => {
  if (!timestamp) return "";
  const date = new Date(timestamp);
  return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${String(
      date.getMinutes()
  ).padStart(2, "0")}`;
};

// 工具函数：文本截断
const truncate = (value: string, length: number) => {
  if (!value) return "";
  return value.length > length ? value.slice(0, length) + "..." : value;
};

// 页面跳转
const goEventDetail = (eventId: string) => {
  router.push({
    path: "/layout/social/event/detail",
    query: {eventId},
  });
};

const goLostFound = () => {
  router.push("/layout/serve/lost-found");
};
const goVideoDetail = (id) => {
  router.push({
    name: "video-detail",
    params: {videoId:id},
  });
};

const goSkuList = () => {
  router.push("/layout/serve/re-market/sku/list");
};

const goSkuDetail = (skuId: number) => {
  router.push({
    path: "/layout/serve/re-market/sku/detail",
    query: {skuId},
  });
};

const goPost = (id) => {
  router.push({
    name: "bard-detail",
    query: {bardId:id}
  })
};

const viewAllVideos = () => {
  router.push("/resources/videos");
};

const viewAllEvents = () => {
  router.push("/layout/social/event");
};

// 数据加载
const getEventHotList = () => {
  eventLoading.value = true;
  reqGetEventPage(eventQuery)
      .then((res) => {
        Object.assign(eventPage, res.data);
      })
      .finally(() => {
        eventLoading.value = false;
      });
};

const getBardList = () => {
  bardLoading.value = true;
  reqGetBardList({pageNum: 1, pageSize: 5})
      .then((res) => {
        bardList.value = res.data.list;
      })
      .finally(() => {
        bardLoading.value = false;
      });
};

const getSkuPage = () => {
  reqGetSkuPage(skuQuery).then((res) => {
    Object.assign(skuPage, res.data);
  });
};


//视频列表相关
let shareVideoPage=reactive({
  pageNum:1,
  total:0,
  list:[]
})
let shareVideoQuery=reactive({
  pageNum:1,
  pageSize:5
})

let getSharePage=async ()=>{
  videoLoading.value = true;
  let res=await reqGetShareVideoPage(shareVideoQuery)
  Object.assign(shareVideoPage,res.data)
  videoLoading.value = false;
}

// 初始化
onMounted(() => {
  getEventHotList();
  getBardList();
  getSkuPage();
  getSharePage()
});

</script>

<style scoped>
.home-page {
  width: 100%;
}

/* 轮播图区域 */
.banner-section {
  width: 100%;
  overflow: hidden;
}

.home-carousel {
  width: 100%;
}

.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.2)
  );
}
.video-card{
  height: 250px;
  width: 400px;
}
.carousel-content {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  max-width: 600px;
  color: #fff;
  z-index: 10;
}

.carousel-title {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.carousel-desc {
  font-size: 16px;
  margin: 0 0 20px;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.carousel-btn {
  padding: 10px 24px;
  font-size: 15px;
}

/* 内容网格布局 */
.content-grid {
  max-width: 1400px;
  margin: 30px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
}

/* 主内容区 */
.content-section {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  padding: 20px;
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #1f2329;
}
.video-card {
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 活动列表 */
.event-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.event-item-card {
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s;
  cursor: pointer;
}

.event-item-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.event-card-content {
  display: flex;
  gap: 15px;
}

.event-img {
  width: 140px;
  height: 100px;
  border-radius: 6px;
}

.event-details {
  flex: 1;
}

.event-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 8px;
}

.event-desc {
  font-size: 13px;
  color: #666;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

.event-meta {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #888;
}

.event-time,
.event-participants {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 侧边栏 */
.sidebar-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  padding: 18px;
}

.sidebar-title {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  color: #333;
}

.title-icon {
  color: #409eff;
  margin-right: 8px;
  font-size: 18px;
}

/* 工具网格 */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 10px;
  border-radius: 8px;
  background-color: #f9fafb;
  cursor: pointer;
  transition: all 0.3s;
}

.tool-item:hover {
  background-color: #f0f7ff;
  transform: translateY(-2px);
}

.tool-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e6f7ff;
  color: #409eff;
  border-radius: 50%;
  margin-bottom: 8px;
}

.tool-name {
  font-size: 13px;
  color: #333;
}

/* 贴吧列表 */
.bard-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bard-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  transition: background-color 0.2s;
  cursor: pointer;
}

.bard-item:hover {
  background-color: #f5f7fa;
}

.bard-avatar {
  width: 40px;
  height: 40px;
  margin-right: 12px;
}

.bard-info {
  flex: 1;
}

.bard-name {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 2px;
}

.bard-count {
  font-size: 12px;
  color: #888;
  margin: 0;
}

/* 跳蚤市场 */
.market-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.market-item {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  transition: background-color 0.2s;
  cursor: pointer;
}

.market-item:hover {
  background-color: #f5f7fa;
}

.market-img {
  width: 60px;
  height: 60px;
  border-radius: 4px;
}

.market-info {
  flex: 1;
  min-width: 0;
}

.market-price {
  font-size: 14px;
  font-weight: 500;
  color: #f56c6c;
  margin: 0;
}

.view-more {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
}

/* 响应式适配 */
@media (max-width: 1200px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .carousel-content {
    left: 5%;
    max-width: 80%;
  }

  .carousel-title {
    font-size: 22px;
  }

  .carousel-desc {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .video-cover {
    height: 120px;
  }

  .event-card-content {
    flex-direction: column;
  }

  .event-img {
    width: 100%;
    height: 160px;
  }
}
</style>
